<template>
  <div class="selectCon">
    <el-select v-model="proValue" placeholder="请选择省" class="el" @change="provinceChange">
      <el-option
        v-for="item in province"
        :key="item.regionId"
        :label="item.name"
        :value="item.regionId"
        :disabled="item.disabled" />
    </el-select>
    <el-select v-model="cityValue" placeholder="请选择市" class="el" @change="cityChange">
      <el-option
        v-for="item in cityForSelPro"
        :key="item.regionId"
        :label="item.name"
        :value="item.regionId"
        :disabled="item.disabled"/>
    </el-select>
    <el-select v-model="areaValue" placeholder="请选择县/区" class="el" @change="areaChange">
      <el-option
        v-for="item in areaForSelCity"
        :key="item.regionId"
        :label="item.name"
        :value="item.regionId"
        :disabled="item.disabled" />
    </el-select>
  </div>
</template>

<script>
import { selectCity } from '@/api/install'
export default {
  name: 'CityCheck',
  props: {
    rowSeleResult: {
      type: Array,
      default: function() {}
    }
  },
  data() {
    return {
      proValue: '',
      cityValue: '',
      areaValue: '',
      province: [], // 所有的省
      cities: [], // 所有的市
      area: [], // 所有的县/区
      cityForSelPro: [], // 选择省后的市
      areaForSelCity: [], // 选择市后的区/县
      nowSel: {} // 当前选择的信息
    }
  },
  created() {
    selectCity({}).then(res => {
      this.allCity = res.result || []
      this.province = this.allCity.filter(item => {
        const obj = item || {}
        return obj.areaLevel - 0 === 2
      })
      this.cities = this.allCity.filter(item => {
        const obj = item || {}
        return obj.areaLevel - 0 === 3
      })
      this.area = this.allCity.filter(item => {
        const obj = item || {}
        return obj.areaLevel - 0 === 4
      })
      // this.proValue = '北京'
      this.proValue = this.rowSeleResult[0]
      this.cityValue = this.rowSeleResult[1]
      this.areaValue = this.rowSeleResult[2]
      this.cityForSelPro = this.cities.filter(item => {
        const obj = item || {}
        return obj.parentId - 0 === this.proValue
      })
      this.areaForSelCity = this.area.filter(item => {
        const obj = item || {}
        return obj.parentId - 0 === this.cityValue
      })
    })
  },
  methods: {
    provinceChange(val) {
      const obj = this.province.find((item) => {
        return item.regionId === val
      })
      const regionId = obj.regionId - 0
      this.cityForSelPro = this.cities.filter(item => {
        const obj = item || {}
        return obj.parentId - 0 === regionId
      })
      this.nowSel = obj
      this.areaForSelCity = []
      this.cityValue = ''
      this.areaValue = ''
      this.$emit('selectCityResult', this.nowSel)
    },
    cityChange(val) {
      const obj = this.cityForSelPro.find((item) => {
        return item.regionId === val
      })
      this.nowSel = obj
      const regionId = obj.regionId - 0
      this.areaForSelCity = this.area.filter(item => {
        const obj = item || {}
        return obj.parentId - 0 === regionId
      })
      this.areaValue = ''
      this.$emit('selectCityResult', this.nowSel)
    },
    areaChange(val) {
      const obj = this.areaForSelCity.find((item) => {
        return item.regionId === val
      })
      this.nowSel = obj
      this.$emit('selectCityResult', this.nowSel)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .container{
    width: 100%;
  }
  .el {
    width: 25%;
  }
</style>

